<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Pharmer -- Smart Medical Prescription Writer</title>
	
	<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" media="all" />
	<link type="text/css" href="libs/rdfaplay/play.css" rel="stylesheet">	
	<link rel="stylesheet" href="css/index.css" media="all" />
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript" src="libs/jquery.min.js"></script>
	<script type="text/javascript" src="libs/jquery-tmpl/jquery.tmpl.min.js"></script>
	<script type="text/javascript" src="libs/bootstrap/js/bootstrap.min.js"></script>

</head>
<body class="bg" spellcheck="false">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Pharmer</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li><a href="index.html">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

<br /><br /><br />
				
<br>
<div class="container">
	<div class="tabbable tabs-left">
		<ul class="nav nav-tabs offset1">
		<li class="active"><a data-toggle="tab" href="#edit">Prescription</a></li>
		<li><a data-toggle="tab" href="#presc_source" onclick="updateSourceCode();">Source Code</a></li>
		<li><a data-toggle="tab" href="#presc_visual" onclick="updateGraph();">Visualization</a></li>
		<li><a data-toggle="tab" href="#presc_facts" onclick="updateTurtle();">Facts</a></li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane active" id="edit">
				<div id="search_bar">
					<a class="btn btn-small" href="#" title="find all drugs" onclick="findAllDrugs();"><i class="icon-eye-open"></i></a>
					<a class="btn btn-small" href="#" title="check drug interactions" onclick="findDrugInteractions();"><i class="icon-exclamation-sign"></i></a>
					<a class="btn btn-small" href="#" title="search for a specific drug" onclick="search_drug();"><i class="icon-search"></i></a>
					<input type="text" class="input-medium search-query hidden" id="search_term" placeholder="drug name">
					<span id="result_of_search"></span>
				</div>
				<div class="span7 img-rounded" id="presc_edit" contenteditable="true" vocab="http://schema.org/" typeof="MedicalTherapy">

				</div>			
			</div>
			<div class="tab-pane span7" id="presc_source">
				<table cellspacing="0" cellpadding="0">
				<tr><td><textarea id="drug_instructions" name="drug_instructions"></textarea></td></tr>
				<tr><td><textarea id="drug_information_source" name="drug_information_source"></textarea></td></tr>
				
				</table>
			</div>	
			<div class="tab-pane span7" id="presc_visual">
				<div id="graph"></div>
			</div>	
			<div class="tab-pane span7" id="presc_facts">
				<textarea id="facts_view" name="facts_view"></textarea>
			</div>				
		</div>
	</div>
</div>
<script>
$(function() {
	$("#presc_edit").keyup(function(event){
		if(event.keyCode == 190){ // when period '.' is pressed
			//console.log(event);
			realTimeTag();
		}
	}).live('blur keyup paste focus', function() {
		
	});
	$("#search_term").keyup(function(event){
		if(event.keyCode == 13){ //when enter is pressed
			//console.log(event);
			handleSearch();
		}
	});	
	$("#presc_edit").bind('paste', function(e) {
		e.preventDefault();
			/*
			var el = $(this);
			setTimeout(function() {
				var text = $(el).val();
				refreshTooltips();
			}, 100);
			*/
	});
	refreshTooltips();
});
$(document).ajaxStart(function(){ 
    $('#ajax_progress_indicator').show();
});
$(document).ajaxStop(function(){ 
    $('#ajax_progress_indicator').hide();
});


</script>

<div id="ajax_progress_indicator" style="display:none;"><img src='img/ajax-loader2.gif'/ alt="loading data..."><span id="loading_text"></span></div>
<script id="search_result" type="text/x-jquery-tmpl">
&nbsp;<span class="btn-group" id="searchid">
<button class="btn item-title-current">
${search_term}
</button>
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
{{if hint!=''}}
	<li>
		<span class="item-title item-hint">{{html hint}}</span>
	</li>
	<li class="divider"></li>
{{/if}}
{{each(i, d) drugs}}
		<li>
			<a href="#" onclick="selectItem('searchid','${d.s}',this)"><span class="item-title"><b>${d.name}</b></span><br/><small>{{html d.description}}</small></a>
		</li>
		<li class="divider"></li>
{{/each}}	
</ul>
</span>&nbsp;				
</script>
<script id="interaction_template" type="text/x-jquery-tmpl">
{{each(i, d) interactions}}
	<table align="center" cellpadding="3" cellspacing="3" border="1">
		<tr><td>Interaction: </td><td> <b>${d.drug_1}</b> and <b>${d.drug_2}</b></td></tr>
		<tr><td>Description: </td><td class="text-warning"> ${d.description}</td></tr>
		<tr><td colspan="2" align="center"><a href="${d.interaction_uri}" target="_blank">Details</a></td></tr>
	</table>
	<hr/>
{{/each}}				
</script>
<div class="hidden" id="temp_repo"></div>
<div class="hidden" id="drug_information" name="drug_information"></div>
<script src="libs/rdfaplay/d3.v2.min.js" type="text/javascript"></script>
<script src="libs/rdfaplay/rdfa.js" type="text/javascript"></script>
<script src="libs/rdfaplay/visualization.js" type="text/javascript"></script>
<script src="libs/rdfaplay/play.js" type="text/javascript"></script>
<iframe id="preview" class="hidden">
	<html>
	<head>
	<body>

	</body>
	</html>
</iframe>

<!-- Modal drug info-->
<div class="modal hide fade" id="drugModal" tabindex="-1" role="dialog" aria-labelledby="drugModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="drugModalLabel">Drug Name</h3>
</div>
<div class="modal-body">

<ul class="nav nav-pills" id="drugTab">
	<li class="active"><a href="#instruction" onclick="showTab('drugTab','instruction')">Instruction</a></li>
	<li><a href="#description" onclick="showTab('drugTab','description')">Description</a></li>
	<li><a href="#brandNames" onclick="showTab('drugTab','brandNames')">Brand Names</a></li>
	<li><a href="#brandMixtures" onclick="showTab('drugTab','brandMixtures')">Brand Mixtures</a></li>
	<li><a href="#absorption" onclick="showTab('drugTab','absorption')">Absorption</a></li>
	<li><a href="#affectedOrganism" onclick="showTab('drugTab','affectedOrganism')">Affected Organism</a></li>
	<li><a href="#biotransformation" onclick="showTab('drugTab','biotransformation')">BioTransformation</a></li>
	<li><a href="#halfLife" onclick="showTab('drugTab','halfLife')">HalfLife</a></li>
	<li><a href="#indication" onclick="showTab('drugTab','indication')">Indication</a></li>
	<li><a href="#mechanismOfAction" onclick="showTab('drugTab','mechanismOfAction')">Mechanism of Action</a></li>
	<li><a href="#pharmacology" onclick="showTab('drugTab','pharmacology')">Pharmacology</a></li>
	<li><a href="#toxicity" onclick="showTab('drugTab','toxicity')">Toxicity</a></li>
	<li><a href="#dosageForms" onclick="showTab('drugTab','dosageForms')">Dosage Forms</a></li>
	<li><a href="#drugCategories" onclick="showTab('drugTab','drugCategories')">Drug Categories</a></li>
	<li><a href="#foodInteractions" onclick="showTab('drugTab','foodInteractions')">Food Interaction</a></li>
	<li><a href="#drugEnzymes" onclick="showTab('drugTab','drugEnzymes')">Drug Enzymes</a></li>
	<li><a href="#drugTargets" onclick="showTab('drugTab','drugTargets')">Drug Targets</a></li>
	<li><a href="#contraindications" onclick="showTab('drugTab','contraindications')">Contraindication</a></li>
</ul>
 
<div class="tab-content span5 img-rounded" id="drugTabContent">
	<div class="tab-pane active" id="instruction">
		<form class="form-horizontal">
			<div class="control-group">
			<label class="control-label" for="quantity">Quantity</label>
			<div class="controls">
			<input type="text" id="inputQuantity" placeholder="Quantity of the drug">
			</div>
			</div>
			<div class="control-group">
			<label class="control-label" for="quantity">Dosage Form</label>
			<div class="controls">
			<select id="inputDosageForm">
			</select>
			</div>
			</div>	
			<div class="control-group">
			<label class="control-label" for="dosageQuantity">Dosage</label>
			<div class="controls">
			<input type="text" id="inputDosageQuantity" placeholder="Dosage Quantity e.g. 250mgs">
			</div>
			</div>	
			<div class="control-group">
			<label class="control-label" for="usageInstruction">Instructions</label>
			<div class="controls">
			<textarea id="inputUsageInstruction" placeholder="Instructions on how to take the drug"></textarea>
			<span class="help-block">* You can also write the other descriptions directly into the prescription box.</span>			
			</div>
			</div>				
		</form>	
	</div>
	<div class="tab-pane" id="description">No information found!</div>
	<div class="tab-pane" id="indication">No information found!</div>
	<div class="tab-pane" id="brandNames">No information found!</div>
	<div class="tab-pane" id="brandMixtures">No information found!</div>
	<div class="tab-pane" id="absorption">No information found!</div>
	<div class="tab-pane" id="affectedOrganism">No information found!</div>
	<div class="tab-pane" id="biotransformation">No information found!</div>
	<div class="tab-pane" id="halfLife">No information found!</div>
	<div class="tab-pane" id="mechanismOfAction">No information found!</div>
	<div class="tab-pane" id="pharmacology">No information found!</div>
	<div class="tab-pane" id="toxicity">No information found!</div>
	<div class="tab-pane" id="dosageForms">No information found!</div>
	<div class="tab-pane" id="drugCategories">No information found!</div>
	<div class="tab-pane" id="foodInteractions">No information found!</div>
	<div class="tab-pane" id="drugEnzymes">No information found!</div>
	<div class="tab-pane" id="drugTargets">No information found!</div>
	<div class="tab-pane" id="contraindications">No information found!</div>
</div>


</div>
<div class="modal-footer">
	<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
	<button class="btn btn-danger" id="deleteButton">Delete</button>
	<button class="btn btn-success" id="saveButton">Save</button>
</div>
</div>

<!-- Modal drug interactions-->
<div class="modal hide fade" id="drugInteractionsModal" tabindex="-1" role="dialog" aria-labelledby="drugInteractionsModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="drugModalLabel">Drug Interactions</h3>
</div>
<div class="modal-body" id="drug_interactions_list">

</div>
<div class="modal-footer">
	<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>

<div class="alert alert-block hidden" id="alert_bar">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <h4>Warning!</h4>
   Online Service is not available at the moment. We will search our local database. For more complete results please try the service again...
</div>

<hr/>
<center>
<div class="alert alert-error">
    <h4>Attention</h4>
   This is just a Beta software developed for educational purposes. Please consider the possible risks of use if you are not an expert in the field.
</div>
</center>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-35023048-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>